<template>
	<div class="page-container">
		<el-card class="page-card" :body-style="{ padding: '32px !important' }">
			<div class="flex flex-col page-h-full">
				<div class="banner_box flex flex-wrap">
					<div class="banner_upload cursor-pointer w-[335px] mr-[24px] mb-[24px]" @click="addAndUpdate(null)">
						<div class="icon-box">
							<svg-icon icon-class="add" size="48px" color="#4c59c6"></svg-icon>
						</div>
						<div class="text-box">
							<span class="mr-[7px] text-[14px] text-[#4c59c6]">新增轮播图</span>
							<el-tooltip class="item" popper-class="tips" effect="dark" placement="top">
								<div slot="content">轮播图推荐尺寸<br />686*300</div>
								<svg-icon icon-class="wenhao" color="#4c59c6" size="14px"></svg-icon>
							</el-tooltip>
						</div>
					</div>
					<div v-for="(item, index) in data" :key="item.id" :data-id="item.id" class="banner_item w-[335px] mr-[24px] mb-[24px]">
						<span class="serial">{{ index + 1 }}</span>
						<el-card :body-style="{ padding: '0px !important' }" shadow="hover">
							<div class="banner_item_info">
								<el-image :src="item.imgUrl" class="image" fit="cover" @click="onPreview(item.imgUrl)"></el-image>
							</div>
							<div class="divOperation">
								<span class="spanModify" @click="addAndUpdate(item.id)">编辑</span>
								<span class="spanLine"></span>
								<span class="spanDelete" @click="remove(item.id)">删除</span>
							</div>
						</el-card>
					</div>
				</div>
			</div>
		</el-card>
		<l-dialog v-model="dialogVisible" :title="title" width="539px" :loading.sync="buttonLoading" @formClose="clearDialog" @formSubmit="submit">
			<div class="divForm">
				<el-form ref="form" :model="formData" label-width="120px" :rules="rules" label-position="right">
					<el-form-item label-width="65px" prop="imgUrl">
						<l-upload-image v-model="formData.imgUrl" height="160px" width="345px" :limit="1" class="w-full">
							<div class="flex flex-col">
								<svg-icon icon-class="add" size="50px" color="#CCCCCC" class="mb-[6px]"></svg-icon>
								<el-tooltip effect="dark" content="支持图片类型jpj,png，图片大小不超过4M。" placement="top">
									<div class="text-[14px] text-[#cccccc] cursor-pointer">上传图片 <i class="el-icon-question"></i></div>
								</el-tooltip>
							</div>
						</l-upload-image>
					</el-form-item>
					<el-form-item label="展示位置:" prop="showType">
						<el-select v-model="formData.locatType" placeholder="请选择展示位置">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="操作:" prop="jumpType">
						<el-radio v-model="formData.jumpType" label="1100">无操作</el-radio>
						<el-radio v-model="formData.jumpType" label="1201">跳转网页</el-radio>
						<el-radio v-model="formData.jumpType" label="1402">跳转商品详细页</el-radio>
					</el-form-item>
					<el-form-item v-if="formData.jumpType !== '1100'" label="跳转信息:" prop="label" label-width="150px">
						<el-input v-if="formData.jumpType === '1201'" v-model.trim="formData.label" class="!w-[258px]" placeholder="请输入网页链接"></el-input>
						<el-input v-else v-model.trim="formData.label" class="!w-[258px]" placeholder="请输入商品ID" maxlength="4" show-word-limit></el-input>
					</el-form-item>
				</el-form>
			</div>
		</l-dialog>
		<image-viewer v-if="showViewer" :z-index="zIndex" :initial-index="imageIndex" :url-list="previewSrcList" :on-close="closeViewer" />
	</div>
</template>

<script>
import { listData, locatTypeData, jumpInfoData, lunboInfoData, addEdit, delLunbo, sortLunbo } from '@/api/mall/lunbo';
import Sortable from 'sortablejs';
import ImageViewer from '@/components/upload-image/image-viewer.vue';
export default {
	name: 'Lunbo',
	components: { ImageViewer },
	props: [],
	data() {
		return {
			showViewer: false,
			zIndex: 999,
			imageIndex: 0,
			options: [
				{
					value: 1002,
					label: '店铺',
				},
				{
					value: 1101,
					label: '商城',
				},
			],
			value: '',
			//轮播图列表数据
			data: [],
			total: 0,
			//轮播图显示顺序
			sortList: [],
			//轮播图odjId
			lunboObjId: [],
			//对话框是否弹出
			dialogVisible: false,
			//图片库对话框是否弹出
			imgPoolVisible: false,
			//请求分页数据
			queryParams: {
				pageNum: 1,
				pageSize: 5,
			},
			//展示位置下拉框数据
			locatTypeOptions: [],
			//详情页下拉框数据
			jumpInfoOptions: [],
			//表单数据
			formData: {
				//图片链接
				jumpType: '1100',
				imgUrl: null,
				locatType: null,
			},
			removeId: null,
			// 表单校验
			rules: {
				// sortNum: [{ required: true, message: '展示顺序不能为空', trigger: 'blur' }],
				locatType: [{ required: true, message: '展示位置不能为空', trigger: 'blur' }],
				// imgUrl: [{ required: true, message: '图片链接地址不能为空', trigger: 'blur' }],
				jumpType: [{ required: false, message: '跳转类型不能为空', trigger: 'blur' }],
				label: [{ required: true, message: '请输入网页链接', trigger: 'blur' }],
			},
			//控制详情页的显示
			jumpInfoShow: false,
			//控制跳转信息的显示
			labelShow: false,
			//对话框标题
			title: '',
			jumpInfo: '',
			buttonLoading: false,
		};
	},
	computed: {},
	watch: {
		'formData.jumpType'(newValue) {
			if (newValue === '1402') {
				this.jumpInfoShow = true;
				this.labelShow = true;
			} else if (newValue === '1201') {
				this.jumpInfoShow = false;
				this.labelShow = true;
			} else {
				this.jumpInfoShow = false;
				this.labelShow = false;
			}
		},
	},
	created() {
		this.getList();
	},
	mounted() {
		//轮播图展示位置下拉框数据
		locatTypeData().then((response) => {
			this.locatTypeOptions = response.data;
		});
		//轮播图详情页下拉框数据
		jumpInfoData().then((response) => {
			this.jumpInfoOptions = response.data;
		});
	},
	updated() {
		let that = this;
		//获取对象
		var el = document.getElementById('itxst');
		//设置配置
		var ops = {
			animation: 1000,
			//拖动结束
			onEnd: (evt) => {
				console.log(sortable);
				var arr = sortable.toArray();

				sortLunbo({ id: arr }).then((res) => {
					listData(that.queryParams).then((response) => {
						that.lunboData = response.data.records;
						that.lunboData.forEach((element) => {
							that.sortList.push(element.sortNum);
							that.lunboObjId.push(element.objId);
						});
					});
				});
			},
		};

		//初始化
		var sortable = new Sortable.create(el, ops);
	},
	methods: {
		getList() {
			//轮播图列表数据
			listData(this.queryParams).then((response) => {
				this.data = response.data;
				this.data.forEach((element) => {
					this.sortList.push(element.sortNum);
					this.lunboObjId.push(element.objId);
				});
			});
		},
		//对话框关闭事件
		clearDialog() {
			this.formData = {
				//轮播图id
				objId: null,
				//图片链接
				imgUrl: null,
				//显示顺序
				sortNum: null,
				//操作类型
				jumpType: '1100',
				//展示位置
				locatType: null,
				//详情页
				jumpInfo: null,
				//跳转信息
				label: null,
			};
			this.$refs['form'].resetFields();
			this.dialogVisible = false;
		},
		//新增或编辑弹出对话框
		addAndUpdate(objId) {
			if (objId !== null) {
				lunboInfoData(objId).then((response) => {
					this.formData = response.data;
					this.jumpInfo = response.data.jumpType;
          this.locatType =response.data.locatType;
					this.formData.jumpType = response.data.jumpType.toString();
					if (response.data.jumpType == '1502' || response.data.jumpType == '1501') {
						this.formData.jumpType = '1402';
					}
					console.log(this.formData);
				});
				this.title = '编辑轮播图';
			} else {
				this.title = '新增轮播图';
			}
			this.dialogVisible = true;
		},
		remove(id) {
			this.$dialogRemove('确定删除该轮播图吗？').then((res) => {
				delLunbo(id).then((response) => {
					if (response.data) {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						setTimeout(() => {
							this.getList();
							res.hide();
							res.loading(false);
						}, 100);
					}
				});
			});
		},
		//新增编辑
		submit() {
			this.buttonLoading = true;
			this.$refs['form'].validate((valid) => {
				if (valid) {
					addEdit(this.formData)
						.then(() => {
							this.$refs['form'].resetFields();
							this.dialogVisible = false;
							this.getList();
						})
						.finally(() => {
							this.buttonLoading = false;
						});
				} else {
					setTimeout(() => {
						this.buttonLoading = false;
					}, 100);
				}
			});
		},
		onPreview(url) {
			let images = [];
			images.push(url);
			this.previewSrcList = images;
			this.showViewer = true;
		},
		closeViewer() {
			this.showViewer = false;
		},
	},
};
</script>

<style lang="scss" scoped>
::v-deep .elx-imgbox .elx-images .el-upload-list__item,
.elx-imgbox .elx-images .el-upload--picture-card {
	width: 305px !important;
}
::v-deep .show .elx-imgbox .elx-images .el-upload-list__item,
.elx-imgbox .elx-images .el-upload--picture-card {
	width: 305px;
}
::v-deep .el-card {
	border: none;
}
.bg_purple {
	padding: 24px;
	min-height: calc(100vh - 84px);
	background: #ffffff;
	//display: flex;
}
.banner_box {
	&::after {
		content: '';
		clear: both;
	}
	.banner_item {
		height: 170px;
		border-radius: 20px;
		overflow: hidden;
		position: relative;
		.serial {
			position: absolute;
			width: 32px;
			height: 32px;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			top: 12px;
			left: 12px;
			color: #ffffff;
			z-index: 2;
			text-align: center;
			line-height: 32px;
			font-size: 16px;
		}
		.banner_item_info {
			display: flex;
			justify-content: space-between;
			height: 170px;
			.image {
				height: 170px;
				width: 100%;
				display: block;
				flex-shrink: 0;
				object-fit: cover;
				cursor: pointer;
			}
			.divText {
				width: 156px;
				h3 {
					margin: 0;
				}
			}
		}
		&:hover {
			.divOperation {
				bottom: 0;
			}
		}
		.divOperation {
			width: 100%;
			height: 50px;
			display: flex;
			position: absolute;
			bottom: -50px;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			transition: 0.5s;
			.spanModify {
				line-height: 50px;
				font-size: 13px;
				color: #fff;
				cursor: pointer;
				flex: 1;
				text-align: center;
			}
			.spanLine {
				color: #fff;
				line-height: 50px;
				position: absolute;
				height: 28px;
				width: 1px;
				top: 50%;
				right: 50%;
				margin-top: -14px;
				background: #ffffff;
			}
			.spanDelete {
				line-height: 50px;
				font-size: 13px;
				color: #fff;
				cursor: pointer;
				flex: 1;
				text-align: center;
			}
		}
	}
	.banner_upload {
		background: rgba(76, 89, 198, 0.05);
		border: 1px dashed #4c59c6;
		height: 170px;
		border-radius: 20px;
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
		.icon-box {
			font-size: 50px;
			text-align: center;
			width: 100%;
			color: #cccccc;
		}
		.text-box {
			color: #cccccc;
			text-align: center;
			width: 100%;
			font-size: 16px;
		}
	}
}

.divForm {
	width: 500px;
	margin: 0 auto;
}
$size: 14px;
.text {
	font-size: $size;
}

.lunboImg {
	width: 150px;
	height: 100px;
	object-fit: cover;
	object-position: center;
	margin-top: 20px;
}
</style>
